<template>
  <div class="body">
    <el-container>
      <!-- 头部导航栏 -->
      <el-header>
        <Index></Index>
      </el-header>
      <!-- 左侧边栏 -->

      <el-container class="mainbackground">
        <el-container>
          <el-main>
            <div id="allmap">
              <!-- <el-image :src="require('../assets/images/系统工况.png')"></el-image> -->
              <el-button type="primary" round @click="handle_replace"
                >打开拓扑</el-button
              >
              <div
                id="topology-canvas"
                class="full"
                :style="backgroundDiv"
                @contextmenu="onContextMenu($event)"
              >
                <el-image
                  v-if="showimage"
                  :src="require('../../assets/images/系统工况.png')"
                ></el-image>
              </div>
            </div>
          </el-main>
        </el-container>
      </el-container>

      <Bottom></Bottom>
    </el-container>
  </div>
</template>
<script>
// import echarts from 'echarts'
// import MyCircle from '../components/MyCircle.vue'
import { Topology } from 'topology-core'
import Index from '~/components/index2'
import Bottom from '~/components/bottom'
export default {
  data() {
    return {
      // icon: require('@/assets/images/onlinecar.png'),
      activeIndex: '1',

      activeName: 'first',
      showimage: true,
      canvas: {},
      canvasOptions: {
        rotateCursor: '/img/rotate.cur'
      },
      backgroundDiv: {
        backgroundColor: 'white',
        // backgroundImage:
        //   'url(' + require('../assets/images/background0.jpg') + ')',

        backgroundRepeat: 'no-repeat',

        backgroundSize: '100% 100%'
      }
    }
  },
  components: {
    Index,
    Bottom
  },
  created() {},

  mounted() {
    this.canvasOptions.on = this.onMessage
    this.canvas = new Topology('topology-canvas', this.canvasOptions)
    // this.open()
  },

  methods: {
    showimageme() {
      this.showimage = false
    },
    handle_replace(data) {
      this.showimage = !this.showimage
      const input = document.createElement('input')
      input.type = 'file'
      input.onchange = event => {
        const elem = event.srcElement || event.target
        if (elem.files && elem.files[0]) {
          const name = elem.files[0].name.replace('.json', '')
          const reader = new FileReader()
          reader.onload = e => {
            const text = e.target.result + ''
            try {
              const data = JSON.parse(text)
              if (data) {
                this.canvas.open(data)
              }
            } catch (e) {
              return false
            }
          }
          reader.readAsText(elem.files[0])
        }
      }
      input.click()
    },
    handleDelete(index, row) {
      alert(index)
      //  this.$router.push({path:'/details',query: {id:item.device_id}})
      this.$router.push({ path: '/indexx' })
      console.log(index, row)
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },

    logout() {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },

    opencarinfo(item) {
      //  this.$router.push({name:'details',params: {id:'1'}})
      // alert("执行")

      this.$router.push({ path: '/details', query: { id: item.device_id } })
    }
  }
}
</script>
<style lang="scss" scoped>
#topology-canvas {
  width: 98%;
  height: 650px;
  padding-left: 30px;
  background-image: url(../../assets/images/新UI23.png);
  background-size: 100%;
}
.el-button {
  margin-top: 13px;
  margin-left: 13px;
  background-image: url(../../assets/images/新UI25.png);
  border-width: 1px;
}
#allmap {
  // height: 800px;
  // color: white;
}
.mainbackground {
  margin-top: 10px;
}
.body {
  width: 100%;
  height: 80%;

  background-image: url(../../assets/images/新UI12.png);
  background-size: 100%;
}
.el-image {
  width: 80%;
  margin-top: 5rem;
  margin-left: 10%;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
</style>
